<template>
	<view>
		<!-- <up-navbar leftIcon="" autoBack bgColor="#B9DBF4" placeholder title="户头管理"></up-navbar> -->
		<view class="my-bg pad-24">
			<view>
				<view class="rightX ">
					<view class="centerXY set">
						<image class="setImgae" src="/static/image/set.png"></image>
						<view v-if="isEdit" @click="hankldeSwitch(false)" class="color-primary font-28 mar-left-10">设置
						</view>
						<view v-else @click="hankldeSwitch(true)" class="color-primary font-28 mar-left-10">编辑
						</view>
					</view>
				</view>
			</view>
			<view @click="hanldeUserInfo(item)" v-for="item in list" :key="item.id"
				class="bg-white pad-30 mar-bottom-30 font-28 radius20">
				<view class="centerXY betweenX">
					<view class="color-text">户主：{{item.water_meter?.holder_username}} </view>
					<view v-if="isEdit" @click.stop="handleShowEdit(item)" class="color-primary">编辑备注</view>
					<view v-else @click.stop="hanldeUnbind(item.water_meter_id)" class="color-primary">解绑</view>
				</view>
				<view class="mar-top-24 color-646464">水表编号：{{item.water_meter?.code}}</view>
				<view class="betweenX mar-top-30 font-26 font-w-400">
					<view class="color-646464">
						{{Number(item.water_meter?.balance) < 0  ? '缴费金额：' : '储值：' }}
						<text class="color-success" v-if="item.water_meter?.balance >0">{{item.water_meter?.balance}}
							元</text>
						<text class="color-error" v-else>{{Math.abs(item.water_meter?.balance)}} 元</text>
					</view>
				</view>
				<view class="mar-top-24 color-646464">地址：{{item.water_meter?.address}}</view>
				<view class="mar-top-20 centerXY betweenX">
					<view class="color-646464">备注：{{item.user_remark}}</view>
					<view v-if="Number(item.water_meter?.balance) < 0" @click.stop="hanldeShowAmount(item)"
						class="button-style pad-left-right-30 pad-top-bottom-10">
						去缴费
					</view>
				</view>
			</view>

			<view class="button-bottom">
				<view class="button-style centerXY" @click="hanldeAddUser">
					<image class="add" src="/static/image/add.png"></image>
					<view class="mar-left-10">新增绑定</view>
				</view>
			</view>
		</view>
		<my-popup content="您确定解绑吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>

		<!-- 修改备注 -->
		<input-popup @confirm="hanldeConfirmEdit" @cancel="showEdit = false" v-model="newUserRemark" :show="showEdit"
			title="修改备注" placeholder="输入要修改的备注"></input-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { userMeterAll, userMeterDel, userMeterUpdate } from '@/api/user.js';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';

	// 切换修改模式
	const isEdit = ref(true);
	// 备注
	const newUserRemark = ref('');
	// 打开修改备注弹窗
	const showEdit = ref(false);
	// 当前条数据
	const rowData = ref({});

	// 跳转详情
	const hanldeUserInfo = (item) => {
		uni.navigateTo({
			url: '/pages/userInfo/userInfo?id=' + item.water_meter_id
		})
	}

	onPullDownRefresh(() => {
		getUserMeterAll();
	});

	// 打开充值弹窗
	const hanldeShowAmount = (item) => {
		uni.navigateTo({
			url: '/pages/recharge/recharge?id=' + item.water_meter_id
		})
	}

	// 切换
	const hankldeSwitch = () => {
		isEdit.value = !isEdit.value;
	}

	// 现在绑定
	const hanldeAddUser = () => {
		uni.navigateTo({
			url: '/pages/addUser/addUser'
		})
	}

	// 点击解绑
	const isPopup = ref(false);
	const water_meter_id = ref('');
	const hanldeUnbind = (id) => {
		water_meter_id.value = id;
		isPopup.value = true;
		// uni.navigateTo({
		// 	url: '/pages/unbind/unbind'
		// })
	}

	// 确定解绑
	const hanldeConfirm = () => {
		userMeterDel({
			water_meter_id: water_meter_id.value
		}).then(res => {
			if (res.code == 200) {
				uni.$u.toast(res.msg);
				getUserMeterAll();
				isPopup.value = false;
			}
		})
	}

	// 打开弹窗
	const handleShowEdit = (item) => {
		showEdit.value = true;
		rowData.value = item;
		newUserRemark.value = item.user_remark;
	}

	// 确定修改
	const hanldeConfirmEdit = () => {
		userMeterUpdate({
			water_meter_id: rowData.value.water_meter_id,
			user_remark: newUserRemark.value
		}).then(res => {
			if (res?.code == 200) {
				uni.$u.toast(res.msg);
				getUserMeterAll();
				showEdit.value = false;
			}
		})
	}

	onShow(() => {
		getUserMeterAll();
	})

	// 获取所以水表
	const list = ref([]);
	const getUserMeterAll = () => {
		userMeterAll().then(res => {
			if (res?.code == 200) {
				list.value = res.data.lists;
				uni.stopPullDownRefresh();
			}
		})
	}
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 120rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0rpx;
		z-index: 2;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}

	.add {
		width: 28rpx;
		height: 28rpx;
	}

	.set {
		border: 1rpx solid $uni-color-primary;
		padding: 5rpx 20rpx;
		border-radius: 40rpx;
		margin-bottom: 30rpx;
	}

	.setImgae {
		width: 28rpx;
		height: 25rpx;
	}

	.content {
		height: 200rpx;
	}

	.up-popup-bg {
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
	}

	.cancel {
		// border: 2rpx solid $uni-color-primary;
		background: rgba(0, 85, 254, 0.1);
	}
</style>